<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <title>旅游产品管理</title>
    <th:block th:replace="/back/common_resources::common_css"/>
    <th:block th:replace="/back/common_resources::common_js"/>
</head>
<body class="hold-transition skin-purple sidebar-mini">
    <div class="wrapper">
    <!-- 页面头部 -->
    <header th:replace="~{/back/common_header::header}"></header>
    <!-- 导航侧栏 -->
    <aside th:replace="~{/back/common_aside::aside}"></aside>
    <!-- 内容区域 -->
    <div class="content-wrapper">
        <!-- 内容头部 -->
        <section class="content-header">
            <h1>
                旅游产品管理

                <small>全部旅游产品</small>
            </h1>
            <ol class="breadcrumb">
                <li><a th:href="@{/back/admin_index}"><i

                        class="fa fa-dashboard"></i> 首页</a></li>
                <li><a th:href="@{/back/product/all}">旅游产品管理</a></li>
                <li class="active">全部旅游产品</li>
            </ol>
        </section>
        <!-- 内容头部 /-->
        <!-- 正文区域 -->
        <section class="content"> <!-- .box-body -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">列表</h3>
                </div>
                <div class="box-body">
                    <!-- 数据表格 -->
                    <div class="table-box">
                        <!--工具栏-->
                        <div class="pull-left">
                            <div class="form-group form-inline">
                                <div class="btn-group">
                                    <a th:href="@{/back/product/addPage}">
                                        <button type="button" class="btn btn-default" title="新建">
                                            <i class="fa fa-file-o"></i> 新建

                                        </button>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <!--数据列表-->
                        <table id="dataList"

                               class="table table-bordered table-striped table-hover dataTable">
                            <thead>
                            <tr>
                                <th></th>
                                <th>产品图片</th>
                                <th width="20%">产品名称</th>
                                <th>价格</th>
                                <th>咨询电话</th>
                                <th>产品状态</th>
                                <th>产品类型</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="product:${productPage.records}">
                                <td><input name="ids" type="checkbox" value="${product.pid}"></td>
                                <td>
                                    <img height="100" th:src="${product.pImage }">
                                </td>
                                <td th:text="${product.productName }"></td>
                                <td th:text="${product.price }"></td>
                                <td th:text="${product.hotline }"></td>
                                <td th:text="${product.status }"></td>
                                <td th:text="${product.category.cname }"></td>
                                <td class="text-center">
                                    <a th:href="@{/back/product/edit(pid=${product.pid})}" class="btn bg-olive btn-xs">修改</a>
                                    <a th:if="${product.status}" th:href="@{/back/product/updateStatus(pid=${product.pid})}" class="btn bg-olive btn-xs">关闭</a>
                                    <a th:if="${!product.status}" th:href="@{/back/product/updateStatus(pid=${product.pid})}" class="btn bg-red btn-xs">开启</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <!--数据列表/-->
                    </div>
                    <!-- 数据表格 /-->
                </div>
                <!-- .box-footer-->
                <div class="box-footer">
                    <div class="pull-left">
                        <div class="form-group form-inline">
                            总共<span th:text="${productPage.pages}"></span>页，共<span th:text="${productPage.total}"></span>条数据。

                        </div>
                    </div>
                    <div class="box-tools pull-right">
                        <ul class="pagination"></ul>
                    </div>
                </div>
                <!-- /.box-footer-->
            </div>
        </section>
        <!-- 正文区域 /-->
    </div>
    <!-- 底部导航 -->
    <footer th:replace="~{/back/common_footer::footer}"></footer>

</div>


    <!-- 在js中获取Model的值 -->
    
    <script th:inline="javascript">
        $(function () {
            var currentPage = [[${productPage.current}]]; // 当前页
            var pages = [[${productPage.pages}]]; // 总页数
            var contextPath = [[${#servletContext.contextPath}]]; // 项目绝对路径
            // 分页插件
            $('.pagination').bootstrapPaginator({
                bootstrapMajorVersion: 3, // bootstrap版本
                currentPage: currentPage, // 当前页
                totalPages: pages, // 总页数
                numberOfPages: 5, // 最多显示多少页
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                          return "末页";
                        case "page":
                           return page;
                    }
                },
                onPageClicked: function (event, originalEvent, type, page) { // 点击页码执行的方法
                    location.href = contextPath + "/back/product/all?page=" + page;
                }
            });
        })
    </script>
</body>
</html>